<template>
  <el-tabs type="border-card">
    <el-tab-pane label="IP表">
      <ipv4AddressIndex :data="props.devices" />
    </el-tab-pane>
    <el-tab-pane label="VLAN表">
      <vlanIndex :data="props.devices" />
    </el-tab-pane>
    <el-tab-pane label="ARP表">
      <macIndex :data="props.devices" />
    </el-tab-pane>
    <el-tab-pane label="路由表">
      <routeIndex :data="props.devices" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { Ipv4MacApi } from '@/api/business/ipv4Mac'
import macIndex from '../ipv4Mac/index.vue'
import routeIndex from '../router/index.vue'
import vlanIndex from '../vlans/index.vue'
import ipv4AddressIndex from '../ipv4Addresses/index.vue'

// 声明接收的 props
const props = defineProps({
  devices: {
    type: Object,
    required: true
  }
})


const macList = ref([])
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const arpQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deviceId: undefined,
})
/** 初始化 **/
onMounted(async () => {

  getArpList()
})

async function getArpList() {
  arpQueryParams.deviceId = 138
  const data = await Ipv4MacApi.getIpv4MacPage(arpQueryParams)
  macList.value = data.list
  total.value = data.total
  console.log("ipppppp", data);
}


</script>